<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>调用bootstrap中的样式实验</title>
		
		<!--调用Bootstrap中的css样式，fonts字体图标自动调用-->
		<link rel="stylesheet" href="../css/bootstrap.css" />
		
		<!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入-->
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
			
	</head>
	<body>
		<div class="container">
			<!--按钮部分样式-->
			<a class="btn btn-default active" href="#" role="button">Link</a>
			<button class="btn btn-primary btn-sm" type="button">Button</button>
			<input class="btn btn-success btn-lg" type="button" value="Input" />
			<input class="btn btn-warning btn-xs" type="submit" value="Submit" />
			
			
			<br /><br /><br />
			
			<!--表格部分样式-->
			<table class="table table-striped table-bordered table-hover">
				<tr class="success">
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
				</tr>
				<tr class="warning">
					<td>11</td>
					<td>22</td>
					<td>33</td>
					<td>44</td>
					<td>55</td>
				</tr>
				<tr class="info">
					<td>111</td>
					<td>222</td>
					<td>333</td>
					<td>444</td>
					<td>555</td>
				</tr>
				<tr class="danger">
					<td>1111</td>
					<td>2222</td>
					<td>3333</td>
					<td>4444</td>
					<td>5555</td>
				</tr>
			</table>
			
			<br /><br /><br />
			
			<!--表单部分样式-->
			<form>
			  <div class="form-group">
			    <label for="exampleInputEmail1">Email address</label>
			    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputPassword1">Password</label>
			    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			  </div>
			  <div class="form-group">
			    <label for="exampleInputFile">File input</label>
			    <input type="file" id="exampleInputFile">
			    <p class="help-block">Example block-level help text here.</p>
			  </div>
			  <div class="checkbox">
			    <label>
			      <input type="checkbox"> Check me out
			    </label>
			  </div>
			  <button type="submit" class="btn btn-default">Submit</button>
			</form>
			
			<br /><br /><br />
			
			<!--导航栏部分使用-->
			<ul class="nav nav-pills">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">分类</a></li>
				<li><a href="#">网站攻略</a></li>
				<li><a href="#">链接一下</a></li>
				<li><a href="#">下载中心</a></li>
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
						点击更多
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu" >
						<li><a href="">菜单1</a></li>
						<li><a href="">菜单2</a></li>
						<li><a href="">菜单3</a></li>
					</ul>
				</li>
			</ul>
			
			<br /><br /><br />
			
			<!--字体图标的部分使用-->
			<div>
				<span class="glyphicon glyphicon-adjust"></span>
				<span class="glyphicon glyphicon-off"></span>
				<span class="glyphicon glyphicon-ok"></span>
			</div>
			
			
			
			<br /><br /><br />
			
			
		</div>
	</body>
</html>
